<template>
	<view class="content f fv">
		<view class="logo f fac fpc">
			<image src="../../static/images/index/logo.png" mode=""></image>
		</view>
		<view class="main">
			<view class="register">注册</view>
		</view>
		<view class="form">
			<input type="text" maxlength="6" v-model="form.user_name" placeholder-style="color: rgba(39,40,50,0.40);font-size: 28rpx;" placeholder="请输入用户名" />
			<input type="text" v-model="form.email" placeholder-style="color: rgba(39,40,50,0.40);font-size: 28rpx;" placeholder="请输入邮箱" />
			<view class="password">
				<input v-model="form.password" maxlength="12" :password="!showPassWord" placeholder-style="color: rgba(39,40,50,0.40);font-size: 28rpx;" placeholder="请输入密码" />
				<image src="../../static/images/sign/look.png" v-if="showPassWord" @click="showPassWord = false"></image>
				<image src="../../static/images/sign/biyan.png" v-else @click="showPassWord = true"></image>
			</view>
			<view class="f fac qr">
				<input type="number" maxlength="6" v-model="form.qrCode" placeholder-style="color: rgba(39,40,50,0.40);font-size: 28rpx;" placeholder="请输入验证码" />
				<button class="qr-btn" @click="sendCode" :disabled="isSending">{{btnText}}</button>
			</view>
		</view>
		<button class="register-btn f fac fpc" :disabled="flag" @click="register">注册</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					user_name: "",
					email: "",
					password: "",
					qrCode: "",
				},
				btnText: "发送验证码",
				isSending: false,
				showPassWord: false
			}
		},
		onLoad() {

		},
		methods: {
			// 注册
			register() {
				this.$request({
					url: 'account/register',
					method: "POST",
					data: this.form,
					isLoading: true
				}).then(res => {
					uni.showModal({
						content:res.message,
						confirmText: "去登录",
						success: (result) => {
							if (result.confirm) {
								uni.navigateBack()
								return
							}
						}
					})
					this.form = {
						user_name: "",
						email: "",
						password: "",
						qrCode: ""
					}
				})
			},
			// 发送验证码
			sendCode() {
				const reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$/;
				if (!reg.test(this.form.email)) {
					uni.showToast({
						title: "请输入正确的邮箱",
						icon: "none"
					})
					return
				}
				this.isSending = true
				this.$request({
					url: 'account/qrcode',
					method: 'POST',
					data: { email: this.form.email },
					isLoading: true
				}).then(res => {
					uni.showToast({
						title:res.message
					})
				})
				let time = 60
				this.btnText = `已发送(${time})`
				const timer = setInterval(() => {
					if (time <= 1) {
						this.btnText = "发送验证码"
						this.isSending = false
						clearInterval(timer)
						return
					}
					this.btnText = `已发送(${--time})`
				}, 1000)
			}
		},
		computed: {
			flag() {
				const reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$/;
				return !(this.form.user_name.trim() && reg.test(this.form.email) && (this.form.password.trim().length >= 6 && this.form.password.trim().length <= 12 && this.form.qrCode))
			}
		}
	}
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 0 58rpx;
	.logo {
		margin-top: 80rpx; 
		image {
			width: 192rpx;
			height: 92rpx;
			
		}
	}
	.main {
		margin-top: 56rpx;
		.register {
			font-size: 56rpx;
			color: $uni-text-color;
			font-weight: 500;
		}
	}
	.form {
		margin-top: 68rpx;
		.password {
			position: relative;
			image {
				position: absolute;
				right: 0rpx;
				top: 32rpx;
				width: 32rpx;
				height: 18rpx;
			}
		}
		input {
			border-bottom: 1px solid #eee;
			font-size: 36rpx;
			color: $uni-text-color;
			padding: 14rpx 0;
			margin-bottom: 16rpx;
			&:focus {
				border-bottom: 1px solid $uni-color-primary;
			}
		}
		.qr {
			position: relative;
			.qr-btn {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 32rpx;
			}
		}
	}
	.register-btn {
		margin-top: 120rpx;
		width: 520rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: $uni-color-primary;
		border: none;
		box-shadow: 0px 25px 16px -18px rgba(255,228,49,0.4);
		font-size: 32rpx;
		&::after {
			border: none !important;
		}
	}
}
</style>